<ion-header>
  <ion-toolbar>
    <ion-icon name="arrow-back" class="bar-btn" (click)="nav.back()" slot="start"></ion-icon>
    <ion-title>个人中心</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

  <div id="content">

    <app-password *ngIf="changePwd" [key]="user['key']" (result)="cancel($event)"></app-password>
    <app-phone *ngIf="changePhone" [key]="user['key']" [oldPhone]="user['phone']" [data]="user"
      (result)="cancel($event)"></app-phone>

    <div *ngIf="!changePwd&&!changePhone">
      <div id="info">
        <!-- <nz-avatar [nzSize]="100" [nzText]="'User'" [nzShape]="'square'" [nzSrc]="user['img']"
          style="background-color:#555d60;box-shadow: 0 0 4px rgba(10,10,10,.5);cursor: pointer;font-size: 40px">
        </nz-avatar> -->
        <img *ngIf="user['img']" [src]="user['img']" style="cursor: pointer;font-size: 40px" />
        <div *ngIf="!user['img']"
          style="background-color:#999;box-shadow: 0 0 4px rgba(10,10,10,.5);font-size: 40px;display: inline-block;width: 100px;height: 100px; text-align: center;line-height: 100px;border-radius: 10px;">
          {{user['username']}}</div>
        <div style="font-size: 40px;font-weight: bold;line-height: 80px;float: right;">
          <ul>
            <li style="line-height: 60px;font-size: 40px;font-weight: bold">{{user['username']}}</li>
            <li style="line-height: 40px;font-size: 16px;float: right;">状态:
              <span *ngIf="user['status']==='0'" style="color: gold;font-weight: bold">未激活</span>
              <span *ngIf="user['status']==='1'" style="color: #52c41a;font-weight: bold">正常</span>
              <span *ngIf="user['status']==='2'" style="color: #ff2222;font-weight: bold">禁用中</span>
            </li>
          </ul>
        </div>
      </div>

      <ul id="ul">
        <li><span>用户角色</span>
          <div>
            <span *ngIf="user['role']==='admin'">管理员</span>
            <span *ngIf="user['role']==='user'">普通用户</span>
            <span *ngIf="user['role']===''">缺省角色</span>
          </div>
          <!-- <nz-divider nzType="horizontal"></nz-divider> -->
        </li>
        <li><span>注册时间</span>
          <div>
            <span>{{user['signtime']}}</span>
          </div>
          <!-- <nz-divider nzType="horizontal"></nz-divider> -->
        </li>
        <li><span>登录密码</span>
          <div>
            <span class="setted" style="margin-right: 10px;">
              <!-- <i nz-icon nzType="check-circle" nzTheme="outline"></i> -->
              <ion-icon name="checkmark-circle-outline"></ion-icon>
              已设置
            </span>
            <!-- <nz-divider nzType="vertical"></nz-divider> -->
            <span (click)="changePwd=true;" class="edit">
              <!-- <i nz-icon nzType="edit" nzTheme="outline"></i> -->
              <ion-icon name="create"></ion-icon>
              修改
            </span>
          </div>
          <!-- <nz-divider nzType="horizontal"></nz-divider> -->
        </li>
        <li><span>绑定手机</span>
          <div>
            <span *ngIf="user['phone']"
              style="margin-right: 10px;">{{user['phone'].substr(0,3)+'****'+user['phone'].substr(8)}}</span>
            <span class="unset" style="margin-right: 10px;" *ngIf="!user['phone']">
              <!-- <i nz-icon nzType="exclamation-circle" nzTheme="outline"></i> -->
              <ion-icon name="alert"></ion-icon>
              未设置
            </span>
            <!-- <nz-divider nzType="vertical"></nz-divider> -->
            <span (click)="changePhone=true;" class="edit">
              <!-- <i nz-icon nzType="edit" nzTheme="outline"></i> -->
              <ion-icon name="create"></ion-icon>
              修改
            </span>
          </div>
          <!-- <nz-divider nzType="horizontal"></nz-divider> -->
        </li>
        <li><span>绑定邮箱</span>
          <div>
            <span *ngIf="user['email']">{{user['email']}}</span>
            <span class="unset" *ngIf="!user['email']">
              <ion-icon name="alert"></ion-icon>
              未设置
            </span>
          </div>
          <!-- <nz-divider nzType="horizontal"></nz-divider> -->
        </li>
        <li><span>首页展示</span>
          <div>
            <span class="setted" *ngIf="user['index']"><i nz-icon nzType="check-circle"
                nzTheme="outline"></i>自定义首页</span>

            <i *ngIf="!user['index']" nz-icon nz-tooltip nzTitle="在拓扑监控，仿真监控中，点击卡片右上角按钮可设置成主页"
              nzType="exclamation-circle" nzTheme="outline"></i>&nbsp;<span *ngIf="!user['index']">默认首页</span>
            <!-- <nz-divider nzType="vertical" *ngIf="user['index']"></nz-divider> -->
            <span *ngIf="user['index']" (click)="setIndex()" class="edit"><i nz-icon nzType="reload"
                nzTheme="outline"></i>还原</span>
          </div>
        </li>
      </ul>

    </div>
  </div>
</ion-content>